<style lang="less" scoped>
.refuse_pop {
  textarea {
    box-sizing: border-box;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    width: 100%;
    font-size: 14px;
    padding: 5px;
    height: 1.5rem;
  }
  .page-part {
    line-height: 0;
  }
  .mint-cell-wrapper {
    background: none;
  }
}
.noDate_page {
  padding-top: 2rem;
}
</style>


<template>
  <div class="gridContainer clearfix">
    <manage-header></manage-header>
    <driver-progress :status="5"></driver-progress>

    <scroller lock-x
              scrollbar-y
              use-pullup
              :height="scrollerHeight"
              @on-pullup-loading="getData"
              v-if="datas.length>0"
              :pullup-config="ScrollerConfig"
              ref="Scroller">
      <div class="acpt-list">

        <div class="acpt-list-wrap mb30"
             v-for="(item, index) in datas">
          <div class="acpt-list-head cf">
            <span class="time f-l">{{item.ATVNo}}</span>
            <em class="org f-r ft12">待回车</em>
          </div>
          <div class="displayflex acpt-list-body lineb">
            <i class="iconfont icon-cargo"></i>
            <div class="txt flex1">
              <p class="ft17">单据数： {{item.alreadyDetialCount}}单</p>
              <p style="color:red">未交货数：{{item.DetialCount}}</p>
              <p>配送路线数：{{item.AddressNum}}个送货地</p>
              <p>商品数量：{{item.TotalPKGS}} 件</p>
              <p>体积：{{item.TotalVolumn.toFixed(3)}} m³</p>
              <p>重量：{{item.TotalWeight.toFixed(3)}} kg</p>
            </div>
          </div>
          <div class="btn-grp txt-rit">
            <div class="btn ml10"
                 @click="DriverEnter(item.Guid,item.PlanRouteState)">回车确认</div>
            <!-- <div class="btn ml10"
                 @click="DriverDeparture(item.Guid)">发车</div> -->
          </div>
        </div>

      </div>

      <div v-if="noMore"
           class="loader-over">没有更多记录了</div>
    </scroller>
    <div class="noDate_page"
         v-if="datas.length === 0">
      <div class="noDate_icon">
        <i class="iconfont icon-null"></i>
      </div>暂无数据，请通知所属公司派单！
    </div>

    <div class="w100fix"></div>
    <footer-menu :status="1"></footer-menu>
    <confirm v-model="show"
             title="是否要回车?"
             content="<p style='color:red'>有未交货的订单</>"
             @on-confirm="DriverConfim"></confirm>
  </div>
</template>

<script>
import manageHeader from "@/components/core/header/manage.header.vue";
import footerMenu from "@/components/core/footer/manage.footer.vue";
import driverProgress from "@/components/core/header/driver-progress.vue";
import { XDialog } from "vux";
import { mapGetters, mapState } from "vuex";
import tools from '../../tools/tool.js';

export default {
  components: {
    manageHeader,
    footerMenu,
    driverProgress,
    XDialog
  },
  data () {
    return {
      datas: [],
      popupVisible: false,
      moneshow: false,
      Memo: "",
      checkedName: "",
      show: false,

      Guid: "",
      totalRecords: 0,
      noMore: false,
      PageIndex: 1,
      PageSize: 4,
      ScrollerConfig: {
        content: "上拉加载",
        downContent: "上拉加载",
        height: 0,
        loadingContent: "加载中...",
        upContent: "上拉加载"
      },
      leaveDate: ''
    };
  },
  computed: {
    userinfo () {
      return JSON.parse(localStorage.userinfo);
    },
    ...mapGetters({
      scrollerHeight: "cfg/getConHeight"
    }),
  },
  created () {
    this.leaveDate = tools.getNow(new Date(), 'Min', 30, 'YMDHM');
  },
  mounted () {
    this.$store.dispatch("cfg/setConHeight");
    this.getData();
  },
  methods: {
    getData () {
      var query = {
        Driver1Guid: this.userinfo.StaffID,
        SateList: ["52", "81"],
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
        PlanRouteState: '18'
      };
      this.Ajax.postTotal("GetTaskorder", query).then(resp => {
        if (resp.IsSuccess) {
          this.totalRecords = resp.TotalRecords;
          if (resp.Datas && resp.Datas.length > 0) {
            this.PageIndex++;
            this.datas = this.datas.concat(resp.Datas);
            this.ScrollControl();
          }
        } else {
          this.Toast({
            message: "列表为空，请稍后刷新"
          });
        }
      });
    },
    DriverEnter (guid, PlanRouteState) {
      var self = this;
      this.Guid = guid;
      if (PlanRouteState == "15") {
        this.show = true;
      } else {
        this.DriverConfim()
      }

    },
    DriverConfim () {
      var self = this;
      let query = {
        Driver1Guid: this.userinfo.StaffID,
        Guid: this.Guid,
        Receiver: this.userinfo.StaffID,
        ReceiverName: this.userinfo.Name
      };
      this.Ajax.post("DriverEnter", query).then(resp => {
        if (resp.IsSuccess) {
          this.$vux.toast.show({
            text: '回车成功',
            type: 'success',
            onHide () {
              //location.reload();
              self.datas = [];
              self.PageIndex = 1;
              self.getData();
            }
          });
        } else {
          this.Toast({
            message: "回车失败: " + resp.ErrorMessage
          });
        }
      });
    },
    ScrollControl () {
      if (this.totalRecords <= this.PageSize) {
        this.ScrollerConfig.content = "";
        this.noMore = true;
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
          });
        });
      }

      if (this.datas.length > 0 && this.$refs.Scroller) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.donePullup();
          });
        });
      }

      if (this.totalRecords == this.datas.length) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }
    },
  }
};
</script>
